import React, { useState } from 'react';
import { Modal, Form, Input, Select } from 'antd';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

function EditStatusFlow({ visiable, close, form, callback }) {
  const { getFieldDecorator } = form;

  const onSubmit = () => {
    form.validateFields((err, value) => {
      if (err) return;
      // console.log(value);
      callback(value);
      close();
    });
  };

  return (
    <Modal
      title="新增环节"
      width="500px"
      destroyOnClose
      onCancel={close}
      visible={visiable}
      onOk={onSubmit}
    >
      <Form>
        <Form.Item label="环节编码" {...formItemLayout}>
          {getFieldDecorator('flowNodeCode', {
            rules: [
              {
                required: true,
                message: '环节编码不能为空',
              },
            ],
          })(<Input placeholder="请输入" />)}
        </Form.Item>
        <Form.Item label="环节名称" {...formItemLayout}>
          {getFieldDecorator('flowNodeName', {
            rules: [
              {
                required: true,
                message: '环节名称不能为空',
              },
            ],
          })(<Input placeholder="请输入" />)}
        </Form.Item>
        <Form.Item label="是否首环节" {...formItemLayout}>
          {getFieldDecorator('isFirstNode', {
            rules: [
              {
                required: true,
                message: '是否首环节不能为空',
              },
            ],
          })(
            <Select placeholder="请选择">
              <Select.Option key="0">是</Select.Option>
              <Select.Option key="1">否</Select.Option>
            </Select>
          )}
        </Form.Item>
        <Form.Item label="是否自动环节" {...formItemLayout}>
          {getFieldDecorator('isAuto', {
            rules: [
              {
                required: true,
                message: '是否自动环节不能为空',
              },
            ],
          })(
            <Select placeholder="请选择">
              <Select.Option key="0">是</Select.Option>
              <Select.Option key="1">否</Select.Option>
            </Select>
          )}
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default Form.create()(EditStatusFlow);
